import { useState, useContext, createContext } from "react";
import { Button } from "antd";

/**
 * Context
 * 多组件共享状态
 */

const defaultContext = { count: 0 };
const MyContext = createContext(defaultContext);

export default function ContextDemo() {
  const [count, setCount] = useState(defaultContext.count);
  return (
    <div>
      <h1>React Context</h1>
      <Button onClick={() => setCount(count + 1)}>按钮</Button>
      <MyContext.Provider value={{ count }}>
        <Greeting />
      </MyContext.Provider>
    </div>
  );
}

function Greeting() {
  const { count } = useContext(MyContext);
  return <div>You clicked {count} times</div>;
}
